<template>
  <view class="serve-con">
    <image :src="serveBg" mode="scaleToFill" style="width: 100vw; height: 700rpx" class="serve-bg" />
    <view class="s-title">{{title}}</view>
    <view class="s-text">{{content}}</view>
    <image :src="serveImg" mode="scaleToFill" class="s-erweima" :show-menu-by-longpress="true" />
  </view>
</template>

<script setup>
// 引入api
import { urlConf } from "@/config/resource";
import useStore from "@/store";
const { common } = useStore();
const serveBg = urlConf + "common/serve-bg.svg";
const serveImg = urlConf + "common/kefu.jpg";

const title = computed(() => common.serveParams?.title || "长按添加客服微信");
const content = computed(() =>
  title.value ? "请长按下方二维码联系管家" : "帮您解答疑问"
);
</script>

<style lang=scss scoped>
.serve-con {
  height: 700rpx;
  position: relative;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  .serve-bg {
    border-radius: 30rpx 30rpx 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
  }

  .s-erweima {
    width: 360rpx;
    height: 360rpx;
  }

  .s-title,
  .s-text {
    padding-top: 60rpx;
    font-weight: 800;
    font-size: 44rpx;
    color: #000;
    text-align: center;
  }
  .s-text {
    padding: 10rpx 0 40rpx;
  }
}
</style>